<template>
  <div class="choose-address">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>
    <div class="table-content">
      <vxe-table
        ref="tableRef"
        @radio-change="radioChangeEvent"
        :radio-config="{ highlight: true }"
        :data="tableData"
        :loading="loading"
        border
        show-overflow="title"
        height="100%"
        :scroll-y="{ enabled: true, gt: 50 }"
      >
        <vxe-column type="radio" width="60">
          <template #header>
            <a-button type="link" @click="clearRadioRowEevnt" :disabled="!selectRow">取消</a-button>
          </template>
        </vxe-column>
        <vxe-column field="countryRegionManageName" title="国家或地区"></vxe-column>
        <vxe-column field="contact" title="收件人"></vxe-column>
        <vxe-column field="city" title="城市"></vxe-column>
        <vxe-column field="state" title="州"></vxe-column>
        <vxe-column field="postcode" title="邮编"></vxe-column>
        <vxe-column field="address" title="详细地址"></vxe-column>
        <vxe-column field="phone" title="电话"></vxe-column>
        <vxe-column field="companyName" title="公司"></vxe-column>
      </vxe-table>
    </div>
    <div class="submit-btn-wrapper">
      <a-button v-debounce type="primary" @click="submitHandle">确认选择</a-button>
      <a-button @click="cancelHandle">取消</a-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { searchItemList } from "./data";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: Base.GeneraDataType;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit", state: any): void;
}>();
const { visible, passData } = toRefs(props);
const { tableData, loading, tableRef, selectRow, searchForm } = InitHook();
const { searchHandle, submitHandle, cancelHandle, clearRadioRowEevnt, radioChangeEvent } = OperationHook({ tableData, loading, emit, tableRef, selectRow, passData, searchForm });
searchHandle();
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      searchHandle();
    } else {
      searchForm.name = "";
      searchForm.postcode = "";
      selectRow.value = null;
    }
  }
);
</script>
<style lang="stylus" scoped>
.choose-address{
    .table-content{
      height: calc(100vh - 260px);
      background: #fff;
      margin-top: 12px;
    }
    .submit-btn-wrapper{
        padding: 12px;
        text-align: center;
        :deep(.ant-btn){
          margin-right: 16px;
        }
    }
}
</style>
